<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>{{Lesson Name}}</title>
					
	<link rel="stylesheet" type="text/css" href="skin/theme.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="skin/deck.css" media="screen" />
	<script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="lib/deck-min.js"></script>
	
	<!-- Include Super Simple Skin -->
	<script type="text/javascript" src="lib/Navigation.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/Navigation.css" media="screen" />
	
    <script type="text/javascript" src="lib/jquery.mousewheel-min.js"></script>
	<!--<link rel="stylesheet" href="lib/minimalist.css">-->
	<script type="text/javascript" src="lib/flowplayer-3.2.13.min.js"></script>
<script>
$(function(){
    $("div.lesson").children().hide();
	$("div#caption1").show("fast");
});
</script>
</head>
<body>	                        		         

<div id="wt_container">
		<span class="objective">{{Course Name}}</span>
		<span class="site-title"><img src="skin/logo.jpg" alt="" /></span>       
        
    	<div id="wt_content">
        	<h1 class="lesson-title">{{Lesson Name}}</h1>                      
            <div id="lesson-summary">            	
                <p>{{lesson_summary}}</p>				
			</div>		
			
<div class="skin">
	











<dl class="slidedeck">
<dt></dt>
<dd>
<img src="images/img-01.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-02.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-03.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-04.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-05.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-06.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-07.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-08.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-09.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-10.png"/>
</dd>

<dt></dt>
<dd>
<img src="images/img-11.png"/>
</dd>
</dl>		<!-- end of deck -->

<center>
<span style="margin-bottom: 5px;">
<a id="audio" style="display:block; vertical-align: top; width:400px;height:24px;" href="audio_MP3WRAP.mp3"></a>
</span>
</center>   

</div>          <!-- end of skin div -->
			
										
<br/><br/><br/><br/>		
<div class="lesson">
<!-- Start of Voice Text -->
<br/><div class="caption" id="caption1">
<br/>
This is slide 1.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption2">
<br/>
This is a slide 2.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption3">
<br/>
This is a slide 3.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption4">
<br/>
This is a slide 4.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption5">
<br/>
This is a slide 5.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption6">
<br/>
This is a slide 6.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption7">
<br/>
This is a slide 7.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption8">
<br/>
This is a slide 8.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption9">
<br/>
This is a slide 9.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption10">
<br/>
This is a slide 10.<br/>
<br/>
End of Slide.<br/></div><br/>

<br/><div class="caption" id="caption11">
<br/>
This is a slide 11.<br/>
<br/>
End of Slide.<br/></div><br/>
<!-- End of Voice Text -->
</div>

		
	</div> <!-- End of wt_content-->
<!--<p>Footer</p>-->
</div> <!-- End of wt_container-->

<script type="text/javascript">
		var myDeck = $('.slidedeck').slidedeck({
			 hideSpines: true,
			 index: false,
			 speed: 100, // one second for the sliding to complete
			 scroll: true,   // Allow mousewheel scrolling
			 before: function(deck){
				// show current slide and hide all others
				$("div.lesson").children().hide();
				$("div#caption"+ deck.current).show();
			}
		});
	</script>
    
	<script>
	var cuepoints = [5,10,15,20,25,30,35,40,45,49,54];
	var cuepoints_mills = get_cuepoints_millis(cuepoints);
	var cuepoints_rounded = get_cuepoints_rounded(cuepoints_mills);
	// install flowplayer into container
	var audioPlayer = flowplayer("audio", "lib/flowplayer-3.2.18.swf", {
	canvas: {backgroundColor: "#ffffff"},
	
	plugins: {
      controls: {        
		  fullscreen: false,	
		  buttonOffColor: 'rgba(90,90,90,1)',
		  timeBgColor: '#262626',
		  borderRadius: '0',
		  bufferColor: '#445566',
		  buttonColor: '#000000',
		  backgroundColor: '#f8981d',
		  volumeSliderColor: '#D00000',
		  timeBorder: '1px solid rgba(0, 0, 0, 0.3)',
		  sliderGradient: 'none',
		  durationColor: '#ffffff',
		  disabledWidgetColor: '#555555',
		  progressGradient: 'none',
		  buttonOverColor: '#FF0000',
		  bufferGradient: 'none',
		  backgroundGradient: 'none',
		  callType: 'default',
		  tooltipColor: '#C9C9C9',
		  timeColor: '#B1E0FC',
		  sliderColor: '#C9C9C9',
		  progressColor: '#112233',
		  tooltipTextColor: '#D00000',
		  volumeSliderGradient: 'none',
		  autoHide: 'never',
		  opacity: 1.0
		
      },
	  
      audio: {
        url: 'lib/flowplayer.audio-3.2.11.swf'
      }
    },
 
    clip: {
		autoPlay: false,
		autoBuffering: false,
		onBeforeBegin: function() {myDeck.goTo(1);},
		// trigger this function on cuepoint
		onCuepoint: [cuepoints_rounded, function(clip, point) {
			//alert(point);
			cue_idx = cuepoints_rounded.indexOf(point) + 2;
			//alert(cue_idx);
			if ( cue_idx > 0 ){						
				myDeck.goTo(cue_idx);
			}	
													
		}],
    }
  });
  
	function get_cuepoints_millis(points){
	  var temp = new Array(points.length);
	  for (i=0; i < points.length; i++){
		  temp[i] = points[i] * 1000;
	  }

	  return temp;
	}
	function get_cuepoints_rounded(points){
	  var temp = new Array(points.length);
	  for (i=0; i < points.length; i++){
		rounded_val = Math.round(points[i] / 100) * 100 ;
		temp[i] = rounded_val;
	  }
	  return temp;
	}
</script>

</body>
</html>